<template>
    <!--  partyBuild对应应急广播   -->
    <div>
        <div class="map-container">

            <!--     地图  开始   -->
            <div id="map" class="map"></div>
            <!--     地图  结束   -->
            <!--     地图菜单左 开始    -->
            <div class="menu-left">
                <!-- 左侧菜单顶部容器 开始 -->
                <div class="left-head-container">
                    <!-- 天气容器 开始  -->
                    <div class="weather-box">
                        <div class="roll-Time">
                            <div>16:24</div>
                            <div>2022-04-27</div>
                        </div>
                        <div class="icon-box">
                            <img class="icon" :src="require('@/assets/bigScreenHome/weather-icon.png')"/>
                            <div>多云</div>
                        </div>
                        <div class="location-box">
                            <div>26℃</div>
                            <div>
                                <!--   地标图标    -->
                                <div class='pin'></div>
                                <div class='pulse'></div>
                                <div class="location">成都市龙泉驿区</div>
                            </div>
                        </div>
                    </div>
                    <!-- 天气容器 结束  -->
                    <!-- 广播容器 开始  -->
                    <div class="equipment-box">
                        <div class="item-box" v-for="item in equipmentData">
                            <img class="icon-head" :src="item.img"/>
                            <div class="item-content">
                                <div>{{item.desc}}</div>
                                <div>{{item.total}}</div>
                            </div>
                            <div class="nums">
                                <div>{{item.num}}</div>
                                <img class="icon" :src="item.status ? require('@/assets/bigScreenHome/up.png'):require('@/assets/bigScreenHome/down.png')"/>
                                <div class="gain" :style="{color:item.status ? '#FFD15C':'#3BDD68'}">{{item.percent}}%</div>
                            </div>
                        </div>
                        <div style=" text-align: left;margin: 5px 20px 5px 20px;color: #B4C0CC">
                            <img  style="margin-right: 5px;" :src="require('@/assets/bigScreenHome/title-icon.png')"/>
                            最新广播内容
                        </div>
                        <div class="broadcast-content">{{broadcastContent}}</div>
                    </div>
                    <!-- 广播容器 结束  -->
                </div>
                <!-- 左侧菜单顶部容器 结束  -->
                <!-- 左侧菜单底部容器 开始 使用顶部容器样式 -->
                <div class="left-head-container" style="margin-top: 16px">
                    <div class="title-box">
                        <div class="title-content">
                            <div>设备使用情况</div>
                            <div>User distribution</div>
                        </div>
                        <Select class="selector" style="width:80px">
                            <Option v-for="item in selectorData" :value="item" :key="item">{{ item }}</Option>
                        </Select>
                    </div>
                    <div class="bottom-chart">
                        <div class="upper-box">
                            <div class="charts-title-box">
                                <div class="item" v-for="item in deviceUsingData">
                                    <div>
                                        <img :src="item.img"/>
                                        <span>{{item.text}}</span>
                                    </div>
                                    <div class="number">{{item.number}}</div>
                                </div>
                            </div>
                            <div class="charts-box">
                                <div v-for="item in 3" :id="'lineChart'+item"></div>
                            </div>
                        </div>
                        <div class="bottom-box">
                            <div style=" text-align: left;margin: 5px 20px 5px 20px;color: #B4C0CC">
                                <img  style="margin-right: 5px;" :src="require('@/assets/bigScreenHome/title-icon.png')"/>
                                报警级别统计
                            </div>
                            <div id="barChart" style="height: 120px"></div>
                        </div>
                    </div>

                </div>
                <!-- 左侧菜单底部容器 结束 -->
            </div>
            <!--     地图菜单左 结束    -->

            <!--     地图菜单右 开始    -->
            <div class="menu-right">
                <div class="right-head-container">
                    <div class="title-box">
                        <div class="title-content">
                            <div>设备在线情况</div>
                            <div>Peace country</div>
                        </div>
                    </div>
                    <div class="table-header">
                        <div>设备名称</div>
                        <div>设备状态</div>
                    </div>
                    <div class="scroll-container">
                        <div class="under-container">
                            <vueSeamlessScroll :data="scrollData" :class-option="defaultOption">
                                <div class="table-item" v-for="item in scrollData">
                                    <div>{{ item.name }}</div>
                                    <div>{{ item.type }}</div>
                                    <div>
                                        <div :class="item.status ? 'correct':'incorrect'"></div>
                                        {{item.status ? '在线':'离线'}}
                                    </div>
                                </div>
                            </vueSeamlessScroll>
                        </div>
                    </div>
                </div>
            </div>
            <!--     地图菜单右 结束    -->
            <!--     地图菜单容器  结束   -->

            <!--   地图下方菜单 开始   -->
            <div class="bottom-menu-container">
                <div class="item" v-for="item in menuBottomData">
                    <img :src="item.img"/>
                    <div class="item-content">
                        <div class="title">{{item.title}}</div>
                        <div class="num">{{item.num}}</div>
                    </div>
                </div>
            </div>
            <!--   地图下方菜单 结束   -->

            <!--   地图下方菜单(小) 开始   -->
            <div class="bottom-menu-left-container">
                <div class="item" v-for="item in menuBottomLeftData">
                    <img :src="item.img"/>
                    <span>{{ item.title }}</span>
                </div>

            </div>
            <!--   地图下方菜单(小) 结束   -->
        </div>
    </div>
</template>
<script>
import * as echarts from "echarts";
import vueSeamlessScroll from "vue-seamless-scroll";
import 'echarts-gl'

export default {
    components: {vueSeamlessScroll},
    data() {
        const self = this;
        return {
            broadcastContent:'西河街道通过“1点位1人”机制，实现“动态+静态”督查方式，开展“三个乱”行为整改200余起，清理市容乱象5000余次，拆除违建2000余平方米，实施植绿遮挡7000平方米，动态整治现场树木移植、田形调整等现实乱象，形成“全链条”管治，“无死角”管控。',
            interVal: null,
            currIndex: 0, //默认第一个高亮
            scrollData:[
                {
                    name:'移民村一组',
                    status:1,
                },
                {
                    name:'白虎村村头',
                    status:0,
                },
                {
                    name:'移民村二组',
                    status:1,
                },
                {
                    name:'白虎村村头',
                    status:1,
                },
                {
                    name:'移民村二组',
                    status:1,
                },
                {
                    name:'白虎村村头',
                    status:1,
                },
                {
                    name:'移民村二组',
                    status:1,
                },
                {
                    name:'白虎村村头',
                    status:1,
                },
                {
                    name:'移民村二组',
                    status:1,
                },
                {
                    name:'白虎村村头',
                    status:1,
                },
                {
                    name:'移民村二组',
                    status:1,
                },
                {
                    name:'白虎村村头',
                    status:1,
                },
                {
                    name:'移民村二组',
                    status:1,
                },
                {
                    name:'白虎村村头',
                    status:1,
                },

            ],
            defaultOption:{
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            },
            center: [104.280751,30.597593],
            marker:require('../../../assets/bigScreenHome/five-star.png'),
            rcgbIcon:require('@/assets/bigScreenHome/rcgb-icon.png'),
            yjgbIcon:require('@/assets/bigScreenHome/yjgb-icon.png'),
            qtgbIcon:require('@/assets/bigScreenHome/qtgb-icon.png'),
            equipmentData:[
                {
                    img:require('@/assets/bigScreenHome/camera-icon.png'),
                    desc:'广播覆盖面积(km²)',
                    total:3571549,
                    status:1,
                    percent:3,
                },
                {
                    img:require('@/assets/bigScreenHome/trumpet-icon.png'),
                    desc:'广播覆盖人口(万人)',
                    total:218.16,
                    status:1,
                    percent:14,
                },

            ],
            selectorData:['全部','当日','近30天','近90天','近一年'],
            scrollData2:[
                {
                    img:require('@/assets/bigScreenHome/mv-2.png'),
                    title:'龙泉驿区204名“树长”守护蜀道翠云廊7千多棵古树',
                    time:'2022-05-31 11:13:04'
                },
                {
                    img:require('@/assets/bigScreenHome/mv-3.png'),
                    title:'龙泉驿区204名“树长”守护蜀道翠云廊7千多棵古树',
                    time:'2022-05-24 11:13:04'
                },
                {
                    img:require('@/assets/bigScreenHome/mv-4.png'),
                    title:'龙泉驿区204名“树长”守护蜀道翠云廊7千多棵古树',
                    time:'2022-05-31 11:13:04'
                },
                {
                    img:require('@/assets/bigScreenHome/mv-5.png'),
                    title:'龙泉驿区204名“树长”守护蜀道翠云廊7千多棵古树',
                    time:'2022-05-22 11:13:04'
                },
            ],
            menuBottomData:[
                {
                    img:require('@/assets/bigScreenHome/sbjrs.png'),
                    title:'终端接入数',
                    num:32,
                },
                {
                    img:require('@/assets/bigScreenHome/sbzxs.png'),
                    title:'终端在线数',
                    num:18,
                },
                {
                    img:require('@/assets/bigScreenHome/sblis.png'),
                    title:'终端离线数',
                    num:6,
                },
                {
                    img:require('@/assets/bigScreenHome/zj.png'),
                    title:'终端故障数',
                    num:6,
                },
            ],
            menuBottomLeftData:[
                {
                    img:require('@/assets/bigScreenHome/rcgb-icon.png'),
                    title:'日常广播',
                },
                {
                    img:require('@/assets/bigScreenHome/yjgb-icon.png'),
                    title:'应急广播',
                },
                {
                    img:require('@/assets/bigScreenHome/qtgb-icon.png'),
                    title:'其他广播',
                },
            ],
            chartsContentData:[
                {
                    icon:require('@/assets/bigScreenHome/5g-icon.png'),
                    title:'5G用户',
                    num:1254,
                    percent:12,
                    status:1,
                },
                {
                    icon:require('@/assets/bigScreenHome/tv-icon.png'),
                    title:'有线电视用户',
                    num:54,
                    percent:9,
                    status:1,
                },
                {
                    icon:require('@/assets/bigScreenHome/tv-icon-2.png'),
                    title:'地面数字电视',
                    num:12,
                    percent:14,
                    status:0,
                },
                {
                    icon:require('@/assets/bigScreenHome/user-icon.png'),
                    title:'户户通用户',
                    num:154,
                    percent:5,
                    status:1,
                },
                {
                    icon:require('@/assets/bigScreenHome/bandwidth-icon.png'),
                    title:'宽带用户',
                    num:125,
                    percent:22,
                    status:0,
                }
            ],
            curPoint:{},
            start:0,
            /** 随便选的点 */
            pointList:[
                 /*龙泉驿区政府 */
                {
                    location:'龙泉驿区',
                    lngLat:[104.27536,30.556808],
                    img:require('@/assets/bigScreenHome/fwwd.png'),
                    phone:'15394612646',
                    specificLocaltion:'四川省成都市龙泉驿区',
                },

                /* 龙泉街道办事处 */
                {
                    location:'龙泉街道办',
                    lngLat: [104.265402,30.562251],
                    type:1,
                    online:1,
                    img:require('@/assets/bigScreenHome/excel_11.png'),
                    phone:'15394613646',
                    specificLocaltion:'四川省成都市龙泉街道办事处',
                },

                /* 洛带古镇 */
                {
                    location:'洛带古镇',
                    lngLat: [104.328033,30.635452],
                    type:0,
                    online:1,
                    img:require('@/assets/bigScreenHome/excel_12.png'),
                    phone:'15395613646',
                    specificLocaltion:'洛带古镇',
                },
                /* 十陵镇 */
                {
                    location:'十陵镇',
                    lngLat: [104.172438,30.645829],
                    type:2,
                    online:0,
                    img:require('@/assets/bigScreenHome/excel_13.jpg'),
                    phone:'15294613646',
                    specificLocaltion:'四川省成都市十陵镇',
                },
                /* 百工堰 */
                {
                    location:'百工堰',
                    lngLat: [104.298105,30.568214],
                    type:2,
                    online:1,
                    img:require('@/assets/bigScreenHome/excel21.png'),
                    phone:'15294613646',
                    specificLocaltion:'四川省成都市百工堰',
                }

            ],
            /** 树状结构 */
            baseData: [{
                expand: true,
                title: '龙泉驿区',
                children: [
                    {
                        title: '龙泉街道',
                        expand: false,
                        children: [
                            {
                                title: '百工堰社区',
                                children:[
                                    {
                                        title:'王文'
                                    },
                                    {
                                        title:'林山'
                                    },
                                    {
                                        title:'文华'
                                    },

                                ]
                            },
                            {
                                title: '星光社区',
                            }
                        ]
                    },
                    {
                        title: '大面街道',
                        expand: false,
                    },
                    {
                        title: '十陵街道',
                        expand: false,
                    },
                    {
                        title: '同安街道',
                        expand: false,
                    },
                    {
                        title: '洛带镇',
                        expand: false,
                    },
                    {
                        title: '洪安镇',
                        expand: false,
                    },
                    {
                        title: '山泉镇',
                        expand: false,
                    }
                ]
            }],
            deviceUsingData:[
                {
                    img:require('@/assets/bigScreenHome/yj.png'),
                    text:'应急广播（起）',
                    number:6
                },
                {
                    img:require('@/assets/bigScreenHome/rc.png'),
                    text:'日常广播（起）',
                    number:14
                },
                {
                    img:require('@/assets/bigScreenHome/qt.png'),
                    text:'其他广播（起）',
                    number:11
                },
            ]
        };
    },
    beforeDestroy() {

    },
    created() {
        /** 使用原生绑定事件 */
        window.closeWindow=()=>{
            this.infoWindow.close()
        }
    },
    mounted() {
        this.initMap()
        this.initEchart1();
        this.initBarChart();
        // this.$Notice.error({
        //     title: '注意数据仅展示，并非真实数据'
        // })
    },
    computed: {
    },
    methods: {
        //初始化地图
        initMap() {

            let amap = new AMap.Map("map", {
                // layers: [imgLayer],
                layers: [
                    //只显示默认图层的时候，layers可以缺省
                    AMap.createDefaultLayer(), //高德默认标准图层
                ],
                center: this.center,
                zoom: 11.5,
                viewMode: "2D", // 地图模式
                resizeEnable: true, //是否监控地图容器尺寸变化
                mapStyle: "amap://styles/darkblue",
            });
            this.map = amap;
            amap.on("complete", (res) => {
                this.districtSearch();
                this.addPoint();
            });
        },
        //添加点坐标
        addPoint() {
            this.map.clearMap();
            let content =''
            this.pointList.forEach(point=>{
                if(point.type == 0){
                    content =
                        `<div><img style="width: 42px;height: 58px" src="${this.rcgbIcon}"/></div>`;
                }else if(point.type == 1 ){
                    content =
                        `<div><img style="width: 42px;height: 58px" src="${this.yjgbIcon}"/></div>`;
                }else{
                    content =
                        `<div><img style="width: 42px;height: 58px" src="${this.qtgbIcon}"/></div>`;
                }
                if(point.location==='龙泉驿区'){
                    content =
                        `<div><img src="${this.marker}"/></div>`;
                }
                var marker = new AMap.Marker({
                    map: this.map,
                    position:  point.lngLat,
                    content: content, //自定义覆盖物,
                    extData: point
                });
                //鼠标点击marker弹出自定义的信息窗体
                marker.on("click", (e) => {
                    console.log('点击了：',e)
                    this.curPoint = e.target._originOpts.extData
                    this.initInfoWindow(marker)
                });
            })


        },
        initInfoWindow(marker) {
            let content =
                ` <div class="model">
                  <img class="pointLine" src="${require('@/assets/bigScreenHome/pointLine.png')}"/>
            <div class="button" onclick="closeWindow()">
                <img src="${require('@/assets/bigScreenHome/close-icon.png')}"/>
            </div>
            <div style="margin: 15px 10px">
                <div class="title">${marker._originOpts.extData.location}广播</div>
            </div>
            <img class="image" src="${marker._originOpts.extData.img}"/>
            <div class="location-text">
                <div>设备位置：<span>${marker._originOpts.extData.specificLocaltion}</span></div>
                <div>在线状态：<span>${marker._originOpts.extData.online ? '在线':'离线'}</span></div>
            </div>
        </div>`;
            // 创建 infoWindow 实例
            this.infoWindow = new AMap.InfoWindow({
                isCustom: true,
                autoMove:true,
                closeWhenClickMap:true,
                showShadow:true,
                content: content, //传入 dom 对象，或者 html 字符串
                offset: new AMap.Pixel(400, -172),
                retainWhenClose: true,
            });
            this.infoWindow.setMap(this.map);
            this.infoWindow.open(this.map, marker.getPosition());
        },
        //边界设置
        districtSearch() {
            let that = this;
            var district = null;
            var polygons = [];
            //实例化DistrictSearch
            var opts = {
                subdistrict: 0, //获取边界不需要返回下级行政区
                extensions: "all", //返回行政区边界坐标组等具体信息
                level: "district", //查询行政级别为 市
            };
            district = new AMap.DistrictSearch(opts);
            //行政区查询
            // district.setLevel(document.getElementById('level').value)
            district.search("龙泉驿区", function (status, result) {
                that.map.remove(polygons); //清除上次结果
                polygons = [];
                var bounds = result.districtList[0].boundaries;
                if (bounds) {
                    for (var i = 0, l = bounds.length; i < l; i++) {
                        //生成行政区划polygon
                        var polygon = new AMap.Polygon({
                            strokeWeight: 1,
                            path: bounds[i],
                            fillOpacity: 0.2,
                            fillColor: "#1883f5",
                            strokeColor: "#007efc",
                        });
                        polygons.push(polygon);
                    }
                }
                that.map.add(polygons);
                // that.map.setFitView(polygons); //视口自适应
            });
        },
        initEchart1() {
            for (let i = 0; i < 3; i++) {
                let dataList = [
                    {
                        value: '11'
                    },
                    {
                        value: '11'
                    },
                    {
                        value: '9'
                    },
                    {
                        value: '10'
                    },
                    {
                        value: '12'
                    },
                    {
                        value: '9'
                    },
                    {
                        value: '11'
                    },
                    {
                        value: '12'
                    }
                ]
                i == 0 ? dataList = dataList.reverse():''
                let sortProperty = function (property){
                    return function (obj1,obj2){
                        return obj1[property]-obj2[property]
                    }
                }
                if(i==1){
                     dataList.sort(sortProperty('value'))
                }else if(i==2){
                    dataList.sort(sortProperty('value')).reverse()
                }
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer:{
                            type:'none'
                        }
                    },

                    title: {
                        left: 26,
                        top: 26,
                        textStyle: {
                            color: '#FFFFFF',
                            fontSize: 15,
                            fontWeight: 50000,
                            fontFamily: 'PingFang SC'
                        }
                    },
                    grid: {
                        left: '2%',
                        right: '2%',
                        bottom: '5%',
                        top: '8%',
                        containLabel: true
                    },
                    dataZoom: [{
                        type: 'inside',
                        start: 0,
                        end: dataList.length > 15 ? 35 : 100
                    }],
                    xAxis: {
                        axisLine: {
                            show:false,
                            lineStyle: {
                                color: '#397cbc'
                            }
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false
                        },
                        //轴线上的字
                        axisLabel: {
                            show: false,
                            textStyle: {
                                color: '#cecece',
                                fontSize: '14'
                            }
                        },
                        data: ['', '', '', '', '', '', '', '']
                    },
                    yAxis: [{
                        type: 'value',
                        splitNumber: 1,
                        axisTick: {
                            show: false
                        },
                        //轴线上的字
                        axisLabel: {
                            show:false,
                            textStyle: {
                                fontSize: '12',
                                color: '#cecece'
                            }
                        },
                        axisLine: {
                            show:false,
                            lineStyle: {
                                color: '#397cbc'
                            }
                        },
                        //网格线
                        splitLine: {
                            show:false,
                            lineStyle: {
                                color: '#11366e'
                            }
                        }
                    }],
                    series: [{
                        name: '起',
                        type: 'line',
                        smooth: true, //是否平滑曲线显示
                        showSymbol: false,
                        markPoint: {
                            data: [{
                                name: '',
                                value: 320,
                                xAxis: 4,
                                yAxis: 320
                            }]
                        },
                        itemStyle: {
                            color: '#44FFDD',
                            borderColor: '#f1f1f1',
                            borderWidth: 1
                        },
                        lineStyle: {
                            normal: {
                                width: 4,
                                color: {
                                    type: 'linear',

                                    colorStops: [{
                                        offset: 0,
                                        color: '#44FFDD' // 0% 处的颜色
                                    },
                                        {
                                            offset: 1,
                                            color: '#44FFDD' // 100% 处的颜色
                                        }
                                    ],
                                    globalCoord: false // 缺省为 false
                                },
                                shadowColor: 'rgba(249,165,137, 0.5)',
                                shadowBlur: 30,
                                shadowOffsetY: 5
                            }
                        },
                        areaStyle: {
                            //区域填充样式
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                                    [{
                                        offset: 0,
                                        color: "rgba(58,182,224, 0.6)"
                                    }, {
                                        offset: 0.6,
                                        color: "rgba(58,182,224, 0.2)"
                                    },
                                        {
                                            offset: 0.8,
                                            color: "rgba(58,182,224, 0.01)"
                                        }
                                    ],
                                    false
                                ),
                                shadowColor: "rgba(58,182,224, 0.1)",
                                shadowBlur: 6
                            }
                        },
                        data: dataList
                    },

                    ]
                };
                let chart = document.getElementById(`lineChart${i+1}`);
                let myChart = echarts.init(chart);
                myChart.setOption(option);
                this.pieActive(myChart,option)
            }
        },
        initBarChart(){
            // xdata
            let xData = ['缺省','蓝(一般)','黄(较大)','橙(重大)','红(特别重大)']
            // ydata
            let yData = [25, 17, 11, 14, 11]
            // pictorialData
            let pictorialData = []
            yData.map(v => { pictorialData.push({ value: v, symbolPosition: 'end' }) })


           let option = {
                tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
               grid: {
                   x: 45,
                   y: 20,
                   x2: 5,
                   y2: 25,
                   borderWidth: 1,
               },
                xAxis: [{
                    type: 'category',
                    data: xData,
                    axisTick: { alignWithLabel: false,show:false },
                    axisLabel: { rotate: 0, textStyle: { fontSize: '80%', color: "#fff" } },
                    axisLine: {
                        show: false,
                    },

                }],
                yAxis:[{
                    type: 'value',
                    name:'',
                    nameTextStyle: { color: '#fff', fontSize: '80%', padding: [0, 0, 0, -45]},
                    splitLine: {
                        lineStyle: {
                            type:'dashed',
                            color: 'rgba(255,255,255, .1)'
                        }
                    },
                    axisLabel: { textStyle: { fontSize: '80%', color: "#fff" }},
                    axisLine: { show: false },
                    axisTick: false
                }],
                series:[{
                    type: 'pictorialBar',
                    symbol: 'rect',
                    symbolSize: [10, 3],
                    symbolOffset: [0, 0],
                    itemStyle: {
                        color:'#0783FA',
                    },
                    tooltip: { show: false },
                    data: pictorialData
                },{
                    type: 'bar',
                    barWidth: 10,
                    data: yData,
                    itemStyle: {
                        color: params => {
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(0, 85, 255, 0.0001)'
                            }, {
                                offset: 1,
                                color: '#0783FA'
                            }])
                        }
                    },

                }]
            };
            let chart = document.getElementById(`barChart`);
            let myChart = echarts.init(chart);
            myChart.setOption(option);
            this.pieActive(myChart,option)
        },
        // 饼状图实现循环高亮
        pieActive(myChart, option) {
            let index = -1; //高亮所在下标
            let dataLength = option.series[0].data.length; // 当前饼图有多少个扇形
            // 用定时器控制饼图高亮
            this.mTime = setInterval(() => {
                // 清除之前的高亮
                myChart.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0,
                    dataIndex: index,
                });
                index = (index + 1) % dataLength;
                // 当前下标高亮
                myChart.dispatchAction({
                    type: "showTip",
                    seriesIndex: 0,
                    dataIndex: index,
                });
                myChart.dispatchAction({
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex: index,
                });

                if (index > dataLength) {
                    index = 0;
                }
            }, 2000);
            // 鼠标划入
            // myChart.on("mouseover", () => {
            //   // 停止定时器，清除之前的高亮
            //   clearInterval(this.mTime);
            //   myChart.dispatchAction({
            //     type: "downplay",
            //     seriesIndex: 0,
            //     dataIndex: index,
            //   });
            // });
        },
    },
};
</script>
<style lang="less" scoped>
@import "../../../styles/fonts/fontNum.less";
/*清除浮动工具*/
.clearfix{
    content: '';
    display: block;
    clear: both;
    height: 0;
}

/deep/.selector{
    background-color: #244A817A;
    position: relative;
    border-radius: 8px;
}
/deep/.ivu-select-item{
    color: #FFFFFF;
    &:hover{
        background-color: rgba(36, 74, 129, 0.51);
    }
}
/deep/.ivu-select-dropdown{
    top: 30px!important;
    left: 0px!important;
    //top: 60px!important;
    //left: 1786px!important;
    color: #ffffff;
    background-color: #244A817A;
}
/deep/.ivu-select-selection{
    background-color: unset;
    border:0;
}
/deep/.ivu-select-selected-value{
    color: rgba(255, 255, 255, 0.94);
}
/deep/.ivu-tree-title{
    margin: 5px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    color: #ffffff;
    &:hover{
        background-color: rgba(44, 62, 80, 0.86);
    }
}
/deep/.ivu-tree-title-selected{
    background-color: unset;
}
/* 公用一个title样式 */
.title-box{
    margin: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title-content{
        div:nth-child(1){
            text-align: left;
            font-family: 'ShiShangZhongHeiJianTi';
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            line-height: 19px;
            text-transform: uppercase;
            color: #FFFFFF;
        }
        div:nth-child(2){
            margin-top: 3px;
            font-family: 'ShiShangZhongHeiJianTi';
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            line-height: 14px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.32);

        }
    }
}

/* 小图标✓ */
.correct {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #3BDD68;
    line-height: 0;
    font-size: 0;
    vertical-align: middle;
    position: relative;
    &::before{
        @h:calc(~'100% - 90%');
        @w:calc(~'100% - 40%');
        display: block;
        content: '';
        height: @h;
        width: @w;
        background-color: #244a81;
        border-radius: calc(~'100px / 2.5');
        transform: rotateZ(316deg);
        position: absolute;
        top: calc(~'100% - 49%');
        right: calc(~'100% - 87%');
    }
    &::after{
        @h:calc(~'100% - 90%');
        @w:calc(~'100% - 70%');
        display: block;
        content: '';
        height: @h;
        width: @w;
        background-color: #244a81;
        border-radius: calc(~'100px / 2.5');
        transform: rotateZ(59deg);
        position: absolute;
        top: calc(~'100% - 42%');
        right: calc(~'100% - 50%');
    }
}
/* 小图标✕ */
.incorrect {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #D93E3E;
    line-height: 0;
    font-size: 0;
    vertical-align: middle;
    position: relative;
    &::before{
        @h:calc(~'100% - 90%');
        @w:calc(~'100% - 40%');
        display: block;
        content: '';
        height: @h;
        width: @w;
        background-color: #244a81;
        border-radius: calc(~'100px / 2.5');
        transform: rotateZ(317deg);
        position: absolute;
        top: calc(~'100% - 54%');
        right: calc(~'100% - 81%');
    }
    &::after{
        @h:calc(~'100% - 90%');
        @w:calc(~'100% - 40%');
        display: block;
        content: '';
        height: @h;
        width: @w;
        background-color: #244a81;
        border-radius: calc(~'100px / 2.5');
        transform: rotateZ(42deg);
        position: absolute;
        top: calc(~'100% - 53%');
        right: calc(~'100% - 79%');
    }
}

.scroll-box{
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    width: 100%;
    background-image: linear-gradient(90deg, rgba(4, 53, 99, 0.4), rgba(4, 53, 99, 0.12));
    position: relative;
    &::before{
        content: '';
        border-top: 1px solid #2993FB;
        border-left: 1px solid #2993FB;
        position: absolute;
        width: 8px;
        height: 8px;
        top: 0;
        left: 0;
    }
    &::after{
        content: '';
        border-bottom: 1px solid #2993FB;
        border-left: 1px solid #2993FB;
        position: absolute;
        width: 8px;
        height: 8px;
        top: 118px;
        left: 0;
    }
    .content-box{
        div:nth-child(1){
            font-weight: 400;
            font-size: 16px;
            line-height: 22px;
        }
        div:nth-child(2){
            color: rgba(242, 246, 250, 0.72);
        }
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    img{
        border: 2px solid #12528D;
        width: 144px;
        height: 106px;

    }
}

.table-header{
    margin: 20px 20px 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
}
.scroll-container{
    overflow: hidden;
    margin: 0px 20px 0px 20px;
    .under-container{
        height: 100%;
        margin-bottom: 20px;
        .table-item{
            margin-bottom: 18px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            div:nth-child(2){
                margin-right: 15px;
            }
        }
    }

}
.bottom-chart{
    .upper-box{
        display: flex;
        justify-content: space-between;
        .charts-title-box{
            padding: 10px;
            .item>div{
                span{
                    font-family: 'Source Han Sans CN';
                    font-style: normal;
                    font-weight: 400;
                    font-size: 16px;
                    line-height: 22px;
                    color: #B4C0CC;
                }
                img{
                    width: 36px;
                    height: 36px;
                    vertical-align: middle;
                }
            }
            .number{
                padding-left: 40px;
                text-align: left;
                font-family: 'Furore';
                font-style: normal;
                font-weight: 400;
                font-size: 32px;
                line-height: 37px;
                color: #F2F6FA;
            }
        }
        .charts-box{
            div{
                padding-left: 10px;
                width: 220px;
                height: 90px;
            }
        }
    }
}

.map{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -1;
}
    .menu-left{
        position: absolute;
        top: 94px;
        left: 20px;
        height: 970px;
        width: 400px;
        margin-right: 16px;
        display: inline-block;
        .left-head-container{
            border-radius: 8px;
            background-color: #11387052;
            overflow: hidden;
            .weather-box{
                margin: 24px 20px;
                border-radius: 8px;
                background-color: #244A8152;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .roll-Time,.icon-box,.location-box{
                    padding: 20px;
                }
                .roll-Time{
                    div:nth-child(1){
                        font-family: 'DIN';
                        font-style: normal;
                        font-weight: 500;
                        font-size: 24px;
                        line-height: 29px;
                        text-align: center;
                        color: #FFFFFF;
                        margin-bottom: 5px;
                    }
                    div:nth-child(2){
                        font-family: 'PingFang SC';
                        font-style: normal;
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 17px;
                        text-align: center;
                        color: rgba(255, 255, 255, 0.64);
                    }
                }
                .icon-box{
                    .icon{
                        width: 72px;
                        height: 72px;
                    }
                    div:nth-child(2){
                        color: rgba(255, 255, 255, 0.62);
                    }
                }
                .location-box{
                    div:nth-child(1){
                        font-family: 'DIN';
                        font-style: normal;
                        font-weight: 500;
                        font-size: 24px;
                        line-height: 29px;
                        text-align: right;
                        color: #FFFFFF;
                    }
                    div:nth-child(2){
                        color: rgba(255, 255, 255, 0.64);
                        position: relative;
                        /* 图标 */
                        .pin {
                            width: 20px;
                            height: 20px;
                            border-radius: 50% 50% 50% 0;
                            background: #FFA14A;
                            position: absolute;
                            transform: rotate(-45deg);
                            left: -12.9%;
                            top: 93%;
                            margin: -20px 0 0 -20px;
                            animation-name: bounce;
                            animation-duration: 1s;
                        }
                        .pin:after {
                            content: '';
                            width: 10px;
                            height: 11px;
                            margin: 7px 0 0 7px;
                            background: rgba(246, 246, 246, 0.95);
                            position: absolute;
                            top: -2px;
                            left: -4px;
                            border-radius: 50%;
                        }
                        .pulse {
                            background: rgba(0,0,0,0.2);
                            border-radius: 50%;
                            height: 14px;
                            width: 14px;
                            position: absolute;
                            left: -18%;
                            top: 21%;
                            margin: 11px 0px 0px -12px;
                            transform: rotateX(55deg);
                            z-index: 10;
                            &::after{
                                content: "";
                                border-radius: 50%;
                                height: 16px;
                                width: 30px;
                                position: absolute;
                                margin: 0px 0 0 -15px;
                                animation: pulsate 1s ease-out;
                                animation-iteration-count: infinite;
                                opacity: 0;
                                -webkit-box-shadow: 0 0 1px 2px #89849b;
                                box-shadow: 0 0 1px 2px #FFA14A;
                                animation-delay: 1.1s;
                            }
                        }
                        @keyframes pulsate {
                            0% {
                                transform: scale(0.1, 0.1);
                                opacity: 0;
                            }
                            50% {
                                opacity: 1;
                            }
                            100% {
                                transform: scale(1.2, 1.2);
                                opacity: 0;
                            }
                        }
                        @keyframes bounce {
                            0% {
                                opacity: 0;
                                transform: translateY(-2000px) rotate(-45deg);
                            }
                            60% {
                                opacity: 1;
                                transform: translateY(30px) rotate(-45deg);
                            }
                            80% {
                                transform: translateY(-10px) rotate(-45deg);
                            }
                            100% {
                                transform: translateY(0) rotate(-45deg);
                            }
                        }
                        .location{
                            margin-top: 10px;
                        }
                    }
                }
            }
            .equipment-box{
                margin: 0px 20px 20px 20px;
                .item-box{
                    display: flex;
                    .item-content{
                        margin-left: 5px;
                        div:nth-child(1){
                            font-family: 'PingFang SC';
                            font-style: normal;
                            font-weight: 400;
                            font-size: 14px;
                            line-height: 20px;
                            color: #FFFFFF;
                        }
                        div:nth-child(2){
                            font-family: 'Furore';
                            font-style: normal;
                            font-weight: 400;
                            font-size: 36px;
                            line-height: 41px;
                            color: #F2F6FA;
                            margin: 5px 0;
                        }
                        div:nth-child(3){
                            font-family: 'PingFang SC';
                            font-style: normal;
                            font-weight: 400;
                            font-size: 14px;
                            line-height: 20px;
                            color: rgba(255, 255, 255, 0.64);
                        }
                    }
                    .icon-head{
                        width: 66px;
                        height: 66px;
                        margin-right: 10px;
                    }
                }
            }
        }
        .left-under-chart{
            width: 100%;
            height: 195px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .left-middle-container{
            height: 404px;
            margin-top: 16px;
            margin-bottom: 16px;
            border-radius: 8px;
            background-color: #11387052;
            overflow: hidden;

        }
    }
    .menu-right{
        position: absolute;
        top: 94px;
        right: 20px;
        height: 970px;
        display: inline-block;
        width: 400px;
        .right-head-container{
            height: 100%;
            border-radius: 8px;
            overflow: hidden;
            background-color: #11387052;
            .right-head-charts{
                display: flex;
                align-items: center;

                .chart-content-box{
                    height: 644px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .charts-content{
                        .title{
                            display: flex;
                            align-items: center;
                            font-family: 'Source Han Sans CN';
                            font-style: normal;
                            font-weight: 400;
                            font-size: 16px;
                            line-height: 22px;
                            color: #B4C0CC;
                            img{
                                width: 25px;
                                height: 25px;
                                margin-right: 10px;
                            }
                        }
                    }
                }
                .charts{
                    .each-chart{
                        width: 129px;
                        height: 129px;
                    }
                }
            }
        }
        .right-bottom-container{
            margin-top: 16px;
            border-radius: 8px;
            overflow: hidden;
            background-color: #11387052;
        }
    }
.bottom-menu-container{
    position: absolute;
    display: inline-flex;
    justify-content: space-around;
    width: 836px;
    left: 542px;
    top: 95px;
    border-radius: 8px;
    background-color: #11387052;
    box-shadow: 0 0 1px 3px #15C0F629;
    align-items: center;
    padding: 10px;
    .item{
        display: inline-block;
        img{
            display: inline-block;
            width: 56px;
            height: 56px;
            margin-right: 15px;
        }
        .item-content{
            display: inline-block;
            .title{
                font-size: 14px;
                line-height: 20px;
            }
            .num{
                text-align: left;
                font-family: 'Furore';
                font-style: normal;
                font-weight: 400;
                font-size: 24px;
                line-height: 28px;
                color: #FFFFFF;
                &::after{
                    content: '个';
                    margin-left: 3px;
                    font-size: 12px;
                    line-height: 17px;
                }
            }
        }
    }
}
.bottom-menu-left-container{
    position: absolute;
    bottom: 32px;
    left: 456px;
    border: dashed 1px #01CEFFA3;
    border-radius: 8px;
    padding: 12px 20px;
    .item{
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        img{
            display: inline-block;
            width: 28px;
            height: 40px;
            margin-right: 10px;
        }

    }
}


.nums{
    font-family: 'Furore';
    font-style: normal;
    font-weight: 400;
    font-size: 50px;
    line-height: 56px;
    color: #F2F6FA;
    display: flex;
    align-items: center;
    .icon{
        margin:10px 10px 0 10px;
        width: 25px;
        height: 25px;
    }
    .gain{
        margin-top: 10px;
        font-family: 'DIN';
        font-style: normal;
        font-weight: 700;
        font-size: 18px;
        line-height: 29px;
    }
}
.broadcast-content{
    padding: 5px;
    border-radius: 8px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 25px;
    color: #B4C0CC;
    background-color: #244A8152;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
</style>
<style>
.Dropdown {
    position: relative;
}

.menu {
    position: absolute;
    right: -50px;
    top: 30px;
    background-color: #fff;
}
</style>
